<!-- flv.js + websocket(node + ffmpeg推流) 
http://192.168.20.149:5175/about?rtspUrl=rtsp://admin:hk12345678@198.168.10.220:554/Streaming/Channels/101
-->
<template>
  <div class="video-box">
    <video controls="controls" class="demo-video" ref="player" muted  @dblclick="fullScreen"></video>
  </div>
</template>
 
<script>
import flvjs from 'flv.js'
import qs from 'qs';
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      player: null,
      loading: true,
      rtsp: '',
    }
  },
  mounted () {
    this.rtsp = qs.parse(location.search.slice(1)).rtspUrl || '';
    console.log('rtsp:', this.rtsp.trim())
    this.playVideo()
    console.log('mounted')
  },
  watch: {
    rtsp: {
      handler: function (val) {
        if (val) {
          if (this.player) {
            this.player.unload()
            // this.player.detachMediaElement();
            this.player.destroy()
            this.player = null
            this.loading = true
          }
          this.$nextTick(() => {
            this.playVideo()
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    fullScreen() {
      const video = this.$refs.player;
      if (video) {
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen();
        }
      }
    },
    playVideo () {
      const time1 = new Date().getTime()
      if (flvjs.isSupported()) {
        let video = this.$refs.player
        if (video  && this.rtsp) {
          this.player = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            //url: `ws://192.168.20.149:8888/rtsp/id123?url=rtsp://admin:hk12345678@192.168.10.220:554/Streaming/Channels/101`
            url: `ws://192.168.20.149:8889/rtsp/id123?url=${encodeURIComponent(this.rtsp)}`
 
          })
          this.player.attachMediaElement(video)
          try {
            this.player.load()
            //this.player.on('canplay', () => {
              this.player.play().then(() => {
                console.log(new Date().getTime() - time1)
                this.loading = false
              })
            //})
          } catch (error) {
            console.log(error)
          }
        }
      }
    }
  },
  beforeDestroy () {
    if (this.player) {
      this.player.unload()
      //this.player.detachMediaElement();
      this.player.destroy()
      this.player = null
    }
  }
}
</script>
<style>
.video-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: black;
}
video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-current-time-display {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
</style>
 
 